<template>
    <div class="select-row flex-bt">
        <div class="left-title">
            {{ title }}
        </div>
        <div class="right-value flex-center" :class="{ isnullselect }" @click="$emit('onClick')">
            {{ showValue }} <span class="iconfont icon-biaodan-xuanze"></span>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { ref, onActivated, onMounted, watch } from 'vue';


defineEmits(['onClick']);
const props = defineProps({
    title: {
        type: String,
        default: ''
    },
    showValue: {
        type: String,
        default: '请选择'
    }
});

const isnullselect = ref(false);
isnullselect.value = props.showValue === '请选择';

watch(() => props.showValue, (val) => {
    isnullselect.value = val === '请选择';
});


onActivated(() => {
    console.log('home keep alive');
});
onMounted(() => {
    console.log('home mounted');
});
</script>

<style lang="scss" scoped>
.select-row {
    height: 45px;
    border-bottom: 0.5px solid #eeeeee;

    .left-title {
        color: #5b5b5b;
        font-size: 14px;
    }

    .isnullselect.right-value {
        color: #d2d2d2;
    }

    .right-value {
        color: #333333;
        span {
            margin-left: 5px;
            color: #d2d2d2;
        }
    }
}
</style>
